<template>
    <h1>出售记录</h1>
    <el-button class="clear-btn" type="danger" size="mini" @click="clearAllBorrowBook()">全部清除</el-button>
   <div class="container" v-for="(item, index) in borrowBooks">
    <el-card>
        <p>商品名：{{ item.book.brandName }}</p>
        <p>售卖人员：管理员</p>
        <p>出售时间：{{ item.time }}</p>
        <el-button type="danger" size="mini" @click="deleteBorrowBook(index)">删除记录</el-button>
    </el-card>
   </div>
</template>


<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { type BorrowBook } from '../models/book';

const borrowBooks = ref<BorrowBook[]>([]);

onMounted(() => {

    if(localStorage.getItem('bookList')) {
        const book = JSON.parse(localStorage.getItem('bookList') as string);
        borrowBooks.value.push(...book)
    }
})

// 删除借阅记录(利用索引删除)
const deleteBorrowBook = (index: number) => {
    borrowBooks.value.splice(index, 1);
    localStorage.setItem('bookList', JSON.stringify(borrowBooks.value));
}

// 清除全部借阅记录
const clearAllBorrowBook = () => {
    borrowBooks.value = [];
    localStorage.setItem('bookList', JSON.stringify(borrowBooks.value));
}
</script>

<style scoped>
h1 {
    text-align: center;
    font-size: 25px;
    margin-bottom: 20px;
}
.el-card {
    margin-right: 20px;
    margin-bottom: 20px;
    position: relative;
}
p {
    margin: 5px;
}
.el-button {
    position: absolute;
    right: 30px;
    top: 50px;
}
.clear-btn {
    position: absolute;
    right: 20px;
    top: 80px;
}
</style>
